<template>
    <div class="background-container">
      <div class="background">

            <div class="button1" @click="handleClick1">
                <button class="square-button1"></button>
                <p class="item_button1">查询传承人</p>
            </div>

            <div class="button2" @click="handleClick2">
                <button class="square-button2"></button>
                <p class="item_button2">查询项目</p>
            </div>

      </div>
    </div>
  </template>
  
  <script>
  export default {
  methods: {
    handleClick1() {
      // 点击后跳转到 '/other' 路由
      this.$router.push('/query_people');
    },
    handleClick2() {
      // 点击后跳转到 '/other' 路由
      this.$router.push('/query_project');
    }
  },
};
  </script>
  
  <style scoped>
  .background {
    /* 设置背景图片 */
  background-image: url("../../assets/query/people.png");
  /* 确保背景图片覆盖整个容器 */
  background-size: cover;
  /* 其他样式，比如宽高、位置等 */
  background-attachment: fixed;
  position: relative;
  width: 100%;
  height: 100vh; /* 视口高度，你可以根据需要调整 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 为了示例，我们添加一个半透明的背景色，以便看到内容 */
  background-color: rgba(0, 0, 0, 0.02);
    
  }
  .background-container {
    width: 100%;
    height: 100vh;
    background-image: url('../../assets/query/back.png');
    background-attachment: fixed;
    background-size: 100vw 80vh;
    background-position: center;
    background-repeat: no-repeat;
  }
 
  .button1{
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-left:10vw;
  .square-button1 {
    background-image: url("../../assets/query/1.png");
    background-size: cover;
    
    width: 6vw; /* 你可以根据需要调整 */
    height: 6vw; /* 与宽度相同，以保持正方形 */
    margin-right: 20vw; /* 按钮之间的间距 */
    margin-bottom: 1%;
    /* 其他样式，比如颜色、边框等 */
    border-color: black;
    border-width: 0.1vw;
    border-style: solid;
    background-color: #fff;
    color: #333;
   /* border-radius: 50px; !* 稍微的圆角 *!
    font-size: 20px; !* 按钮内文本大小 *!*/
    border-radius: 20%; /* 稍微的圆角 */
    font-size: 40%; /* 按钮内文本大小 */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* 去除按钮默认样式 */
    outline: none;
  }
  .item_button1{
   /* margin-top: 5px;
    font-size: 40px;
    margin-right: 200px;*/
    margin-top: 1%;
    font-size: 1.5vw; /* 文本大小 */
    margin-right: 68%; /* 文本右边距 */
    text-align: center; /* 文本对齐方式 */
  }
}

.button2{
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  .square-button2 {
    background-image: url("../../assets/query/2.png");
    background-color:#333;
    background-size: contain;
    /* 设置按钮为正方形 */
    width: 6vw; /* 你可以根据需要调整 */
    height: 6vw; /* 与宽度相同，以保持正方形 */
    margin-right: 5vw; /* 按钮之间的间距 */
    margin-bottom: 1%;
    /* 其他样式，比如颜色、边框等 */
    border-color: black;
    border-width: 0.1vw;
    border-style: solid;
    background-color: #fff;
    color: #333;
    border-radius: 20%; /* 稍微的圆角 */
    font-size: 40%; /* 按钮内文本大小 */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* 去除按钮默认样式 */
    outline: none;
  }
  .item_button2{
    margin-top: 1%;
    font-size: 1.5vw; /* 文本大小 */
    margin-right: 35%; /* 文本右边距 */
    text-align: center; /* 文本对齐方式 */
  }
}

  </style>